<template>
  <div class="login-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="用户登录" fixed placeholder />

    <!-- 登录表单 -->
    <van-form @submit="onSubmit" @failed="onFailed" class="login-form">
      <!-- 用户名输入 -->
      <van-field
        v-model="formData.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名/手机号/邮箱"
        autocomplete="username"
        :rules="[{ required: true, message: '请填写用户名' }]"
        clearable
        size="16px"
      />

      <!-- 密码输入 -->
      <van-field
        v-model="formData.password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        autocomplete="current-password"
        :rules="[{ required: true, message: '请填写密码' }]"
        clearable
      />

      <!-- 记住我 & 忘记密码 -->
      <div class="form-options">
        <van-checkbox v-model="formData.remember" shape="square">
          记住我
        </van-checkbox>
        <span class="forget-password" @click="toForgetPassword">
          忘记密码?
        </span>
      </div>

      <!-- 登录按钮 -->
      <div class="submit-btn">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :loading="loading"
          loading-text="登录中..."
        >
          登 录
        </van-button>
      </div>

      <!-- 注册引导 -->
      <div class="register-guide">
        还没有账号? <span @click="toRegister">立即注册</span>
      </div>
    </van-form>

    <!-- 第三方登录 -->
    <div class="third-party-login" v-if="showThirdPartyLogin">
      <div class="divider">
        <span class="line"></span>
        <span class="text">其他登录方式</span>
        <span class="line"></span>
      </div>
      <div class="icons">
        <div class="icon-item" @click="wechatLogin">
          <van-icon name="wechat" color="#07C160" />
          <span>微信</span>
        </div>
        <div class="icon-item" @click="alipayLogin">
          <van-icon name="alipay" color="#1677FF" />
          <span>支付宝</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant'
import { login } from '@/api/home.js'
import { setToken } from '@/utils/token.js'

const router = useRouter();
const loading = ref(false);
const showThirdPartyLogin = ref(true); // 可根据需要配置是否显示第三方登录

// 表单数据
const formData = reactive({
  username: '16620250001',
  password: '123456',
  remember: false
});

// 检查本地存储的记住我状态
onMounted(() => {
  const rememberMe = localStorage.getItem('rememberMe');
  if (rememberMe === 'true') {
    formData.remember = true;
    // 这里可以添加自动填充已保存的用户名逻辑
  }
});

// 提交登录
const onSubmit = async () => {
  try {
    loading.value = true;

    login(formData).then(res => {
      loading.value = false;
      // 登录成功处理
      showToast('登录成功');
      setToken(res.data)

      // 记住我功能
      if (formData.remember) {
        localStorage.setItem('rememberMe', 'true');
        // 实际项目中应该使用更安全的方式存储凭证
      } else {
        localStorage.removeItem('rememberMe');
      }

      // 跳转到首页
      router.push('/').then(() => {});
    }).catch(error => {
      showToast(error.message || '登录失败');
      loading.value = false;
    })
  } catch (error) {
    showToast(error.message || '登录失败');
  }
};

const onFailed = (errorInfo = {errors: [], values: []}) => {
  console.log('_errorInfo', errorInfo)
  if (errorInfo.errors.length) {
    showToast('请填写完整登录信息')
  }
}

// 跳转到注册页面
const toRegister = () => {
  router.push('/register');
};

// 跳转到忘记密码页面
const toForgetPassword = () => {
  router.push('/forget-password');
};

// 第三方登录方法
const wechatLogin = () => {
  // 实际项目中这里调用微信登录API
  showToast({
    message: '正在跳转微信登录...',
    icon: 'wechat',
  });
};

const alipayLogin = () => {
  showToast('支付宝登录');
  // 实际项目中这里调用支付宝登录API
};
</script>

<style scoped lang="scss">
:deep(.van-field__control), :deep(.van-field__label) {
  font-size: 16px !important;
}
.login-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.login-form {
  margin-top: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}

.forget-password {
  font-size: 16px;
  color: #1989fa;
  cursor: pointer;
}

.submit-btn {
  margin: 20px 0;
}

.register-guide {
  text-align: center;
  font-size: 16px;
  color: #969799;
  margin-top: 16px;
}

.register-guide span {
  color: #1989fa;
  cursor: pointer;
}

.third-party-login {
  margin-top: 40px;
  text-align: center;
}

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #969799;
  font-size: 16px;
}

.divider .line {
  flex: 1;
  height: 1px;
  background-color: #ebedf0;
}

.divider .text {
  padding: 0 16px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 15px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  .van-icon{
    font-size: 44px;
  }
}

.icon-item span {
  font-size: 14px;
  margin-top: 5px;
  color: #646566;
}
</style>
